<!--数据中心-综合查询页面-->
<template>
  <div class="box">
    <div class="main">
      <!-- 检索 -->
      <div class="s-box">
        <div class="search-box">
          <el-input
            placeholder="请输入关键词"
            v-model="opts.searchTxt"
            class="search-inp"
            @keydown.enter.native="search()"
          >
            <div slot="prefix">
              <el-dropdown
                placement="top"
                trigger="click"
                @command="handleCommand">
                <span class="el-dropdown-link chooseType">{{curSType}}<i class="el-icon-arrow-down el-icon--right"></i></span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="综合">综合</el-dropdown-item>
                  <el-dropdown-item command="专利">专利</el-dropdown-item>
                  <el-dropdown-item command="文献">文献</el-dropdown-item>
                  <el-dropdown-item command="成果">成果</el-dropdown-item>
                  <el-dropdown-item command="项目">项目</el-dropdown-item>
                  <el-dropdown-item command="标准">标准</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-input>
          <el-button type="primary" class="search-btn2" @click="search()">检索</el-button>
        </div>
      </div>
      <Overview ref="overview" :keywordTxt='opts.searchTxt' @keyword='handleKeyword'/>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import Overview from './Overview'
export default {
  components: {
    Overview,
  },
  computed:{
    ...mapState(['IRkeyword', 'facetParams']),
  },
  data() {
    return {
      menuList: [],
      isMenuFold: false, // 左侧菜单折叠
      curType: '综合',
      curSType: '综合',
      showAdvancedPanel: false,
      opts: {
        searchTxt: '',
        ipi: 1,
        ips: 10,
        sort: -1, // 排序  1 倒序 DESC ，2 正序 ASC
        accurateSearch: '',
        includeSearch: '',
        notIncludeSearch: '',
        advanced: false, // 高级检索
        resetFacet: true, // 是否需要重置分面，即左侧的二级聚类
      },
      scrollOps: {
        vuescroll: {
          mode: 'native'
        },
        scrollPanel: {
          initialScrollX: false,
          initialScrollY: false,
          scrollingX: false,
          scrollingY: true,
        },
        rail: {
          background: 'rgba(255,255,255,.1)',
          gutterOfEnds: '10px'
        },
        bar: {
          background: '#eee',
          size: '5px'
        }
      },
      resultTotal: '', //结果条数
      downloading: false
    }
  },
  watch: {
    '$route'(newVal, oldVal) {
      this.search()
    },
  },
  mounted() {
    this.init()
  },
  methods: {
    //点击右侧相关推荐,然后进行搜索
    handleKeyword(name){
      this.opts.searchTxt = name
      this.search()
    },
    init() {
      this.opts.searchTxt = this.$route.query.keyword || '太阳能电池'
      this.search()
    },
    search() {
      if(this.curType !== '综合' && this.opts.searchTxt == ''){
        this.$message.warning('请输入要查询的内容')
        return
      }
      this.$store.commit('setSearchWord', this.opts.searchTxt)
      this.$store.commit('setIRkeyword', this.opts.searchTxt)
      this.resultTotal = ''
      if (this.curType === '综合') {
        this.$nextTick(() => {
          this.$refs.overview.init(this.opts)
        })
      } else if (this.curType === '专利') {
        this.$nextTick(() => {
          this.handleChangePage({
            routeName:'DCMain',
            routeLabel:'专利库',
            type:'patent'
          })
        })
      } else if (this.curType === '文献') {
        this.$nextTick(() => {
          this.handleChangePage({
            routeName:'DCMain',
            routeLabel:'文献库',
            type:'paper'
          })
        })
      } else if (this.curType === '成果') {
        this.$nextTick(() => {
         this.handleChangePage({
            routeName:'DCMain',
            routeLabel:'成果库',
            type:'achieve'
          })
        })
      } else if (this.curType === '项目') {
        this.$nextTick(() => {
          this.handleChangePage({
            routeName:'DCMain',
            routeLabel:'项目库',
            type:'project'
          })
        })
      } else if (this.curType === '标准') {
        this.$nextTick(() => {
          this.handleChangePage({
            routeName:'DCMain',
            routeLabel:'标准库',
            type:'standard'
          })
        })
      } 
    },
    handleChangePage(item) {
      if (item.name === '产业') {
        return
      }
      this.$router.push({
        name: item.routeName,
        query:{
          label:item.routeLabel,
          type:item.type || 0,
        }
      })
    },
    handleCommand(e) {
      this.curSType = e
      this.curType = e
    },
    // 切换左侧菜单栏
    handleChangeMenuFold() {
      this.isMenuFold = !this.isMenuFold
    },
  },
}
</script>

<style lang="scss" scoped>
.el-dropdown-link{
  cursor: pointer;
}
.chooseType{
  font-size: 0.14rem;
}
.box {
  position: relative;
  display: flex;
  min-height: calc(100vh - .7rem);
  padding: .24rem .28rem;
  box-sizing: border-box;
  background-color: $color46;
  .menu {
    position: fixed;
    top: .7rem;
    left: 0;
    z-index: 3;
    width: 1.02rem;
    height: calc(100vh - .7rem);
    padding-top: .16rem;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    background-color: $color2;
    overflow-x: hidden;
    overflow-y: auto;
    transition: all .2s linear;
    // 展开
    // &:hover 
    &.menu-fold {
      width: 1.6rem;
      h5 {
        .circle, span {
          display: inline-block;
        }
      }
      .menu-list {
        li {
          padding: 0 .18rem 0 .66rem;
          .logo {
            position: absolute;
            top: 50%;
            left: .15rem;
            margin-top: -.18rem;
          }
          span {
            display: inline-block;
          }
        }
      }
    }
    h5 {
      width: 1.6rem;
      height: .4rem;
      line-height: .4rem;
      margin-bottom: .1rem;
      font-size: .16rem;
      font-weight: normal;
      text-align: center;
      text-indent: -.09rem;
      color: $color47;
      span {
        display: none;
        vertical-align: middle;
      }
    }
  
  }
  .main {
    position: relative;
    width: 100%;
    .s-box {
      position: relative;
      margin-bottom: .24rem;
      .search-box {
        position: relative;
        display: flex;
        align-items: center;
        .advanced-box {
          position: relative;
          display: inline-block;
          z-index: 3;
          height: .4rem;
          line-height: .4rem;
          margin-right: .2rem;
          .advanced-btn {
            // font-family: SourceHanSansCN-Medium;
            font-size: .16rem;
            color: $mainColor;
            cursor: pointer;
            span {
              display: inline-block;
              margin-right: .02rem;
            }
          }
        }
        .search-inp {
          width: 7.7rem;
          height: .4rem;
          margin-right: .14rem;
          vertical-align: middle;
          background-color: $color2;
          ::v-deep {
            ::placeholder {
              color: $color49 !important;
              // color: red !important;
            }
            .el-input__inner {
              height: .4rem;
              line-height: .4rem;
              padding-left: .79rem;
              padding-right: .15rem;
              border-color: $mainColor;
              border-radius: 6px;
              // font-family: SourceHanSansCN-Regular;
              font-size: .14rem;
              color: $color49;
              background-color: transparent;
            }
            .el-input__prefix {
              position: absolute;
              top: 0;
              left: 0;
              width: .7rem;
              line-height: .38rem;
              font-size: .18rem;
              color: $mainColor;
              &:after {
                position: absolute;
                top: 50%;
                right: 0;
                width: 1px;
                height: .32rem;
                margin-top: -.16rem;
                background-color: $color50;
                content: '';
              }
            }
            .el-input__prefix2 {
              position: relative;
              width: .64rem;
              padding: 0;
              border-color: $mainColor;
              border-top-right-radius: 6px;
              border-bottom-right-radius: 6px;
              box-sizing: border-box;
              text-align: center;
              background-color: transparent;
              // cursor: pointer;
              .search-btn {
                display: block;
                width: 100%;
                text-align: center;
                font-size: .14rem;
                font-weight: bold;
                color: $mainColor;
                cursor: pointer;
              }
            }
          }
        }
        .search-btn2 {
          width: .96rem;
          height: .4rem;
          padding: 0;
          border-color: $mainColor;
          border-radius: 6px;
          box-sizing: border-box;
          // font-family: SourceHanSansCN-Regular;
          font-size: .16rem;
          font-weight: bold;
          letter-spacing: 1px;
          color: $color17;
          vertical-align: middle;
          background-color: $mainColor;
          &:hover {
            background-color: rgba(3, 179, 140,0.6);;
          }
        }

      }
    }
    .fade-enter-active, .fade-leave-active {
      transition: transform .4s ease-in-out
    }
    .fade-enter, .fade-leave-active {
      transform: translate3d(0,-100%,0);
    }
  }

}
</style>